<template>
  <div id="course-management" v-loading="loading">
    <Head />
    <h1 class="title"><i class="iconfont icon-course"></i> 我的课程管理</h1>
    <div class="main">
      <el-table :data="responseAll" border stripe style="width: 100%">
        <el-table-column prop="coverImage" label="封面" width="120">
          <template v-slot="scope">
            <img
              :src="scope.row.coverImage"
              class="cover-image"
              @click="selectDetail(scope.row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="课程标题"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="url" label="课程链接"></el-table-column>
        <el-table-column prop="tags" label="标签"></el-table-column>
        <el-table-column prop="parentId" label="关联课程"></el-table-column>
        <el-table-column label="操作" width="200">
          <template v-slot="scope">
            <el-button
              type="primary"
              size="small"
              @click="openEditModal(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="deleteCourse(scope.row.id)"
              >移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: center"
        background
        layout="prev, pager, next"
        :total="totalItems"
        :current-page="pageNum"
        :page-size="pageSize"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>

    <el-dialog title="编辑课程" :visible.sync="editModalVisible">
      <el-form :model="editForm">
        <el-form-item label="课程标题">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="课程描述">
          <el-input v-model="editForm.description"></el-input>
        </el-form-item>
        <el-form-item label="课程封面">
          <el-input v-model="editForm.coverImage"></el-input>
        </el-form-item>
        <el-form-item label="课程链接">
          <el-input v-model="editForm.url"></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="editForm.tags"></el-input>
        </el-form-item>
        <el-form-item label="关联课程">
          <el-input v-model="editForm.parentId"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editModalVisible = false">取消</el-button>
        <el-button type="primary" @click="saveCourse">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
import { ref } from "vue";
import Head from "@/components/head.vue";
export default {
  name: "course-management",
  components: { Head },
  data() {
    return {
      responseAll: [],
      pageNum: 1,
      pageSize: 10,
      totalItems: 0,
      editModalVisible: false,
      editForm: {
        id: "",
        title: "",
        description: "",
        coverImage: "",
        url: "",
        tags: "",
        parentId: "",
      },
      loading: false,
    };
  },
  methods: {
    getCourses() {
      this.loading = true;
      let url = `/api/resources/my?pageNum=${this.pageNum}&pageSize=${this.pageSize}`;
      this.$http
        .get(url)
        .then((res) => {
          this.responseAll = res.data.rows;
          this.totalItems = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handlePageChange(page) {
      this.pageNum = page;
      this.getCourses();
    },
    openEditModal(course) {
      this.editForm = { ...course };
      this.editModalVisible = true;
    },
    saveCourse() {
      this.$http.post(`/api/courses/update`, this.editForm).then((res) => {
        if (res.data.code === 200) {
          this.$message.success("修改成功");
          this.editModalVisible = false;
          this.getCourses();
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    deleteCourse(id) {
      this.$confirm("是否删除该课程？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete(`/api/courses/delete/${id}`).then((res) => {
            if (res.data.code === 200) {
              this.$message.success("删除成功");
              this.getCourses();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
  },
  mounted() {
    this.getCourses();
  },
};
</script>
  
  <style lang="less" scoped>
#course-management {
  .title {
    text-align: center;
    margin-bottom: 20px;
  }
  .cover-image {
    width: 100px;
    height: 60px;
    border-radius: 8px;
    cursor: pointer;
    object-fit: cover;
  }
}
.main {
  width: 80%;
  margin: auto;
}
/deep/ .head_center {
  display: none;
}
/deep/ .header {
  height: 50px;
}
</style>